<template>
  <CommonHeaderComponent>
    <div slot="headTopContent">
      <a-tabs v-model="activtKey">
        <a-tab-pane key="1">
          <div slot="tab">
            {{ `复议监督 ${ superviseDealNum? "（" + superviseDealNum + "）" : "（0）"}` }}
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <template slot="headContent">
      <div v-if="activtKey == '1'">
      </div>
    </template>
  </CommonHeaderComponent>
</template>

<script>
import CommonHeadQueryComponent from '@/views/accept/component/CommonHeadQueryComponent.vue'
import CommonHeaderComponent from '@/views/accept/component/CommonHeaderComponent.vue'
import { ADMREVIEW_DEPART } from '@/utils/custom/custom-depart.js'
import { queryUserTreeByDepartids } from '@/api/base/ha_user'
import { CommonAssignQuery } from '@/api/workflow/wf_CompreQuery.js'
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
import storage from 'store'
import { Tp_biztype } from '@/enumeration/Tp_biztype'

const leftTableColumns = [
 {
    title: '案号',
    dataIndex: 'acceptcode',
    key: 'acceptcode',
    width: 250,
    align: 'center'
  },
  {
    title: '申请人名称',
    dataIndex: 'applyname',
    key: 'applyname',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人名称',
    dataIndex: 'targetname',
    key: 'targetname',
    width: 250,
    align: 'left',
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '承办人',
    width: 150,
    key: 'dealName',
    dataIndex: 'dealName',
    align: 'center',
    scopedSlots: { customRender: 'dealNameSlot' }
  },
  {
    title: '申请时间',
    dataIndex: 'subtime',
    key: 'subtime',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'subtimeSlot' }
  }
]
const rightTableColumns = [
{
    title: '案号',
    dataIndex: 'acceptcode',
    key: 'acceptcode',
    width: 250,
    align: 'center'
  },
  {
    title: '申请人名称',
    dataIndex: 'applyname',
    key: 'applyname',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人名称',
    dataIndex: 'targetname',
    key: 'targetname',
    width: 250,
    align: 'left',
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '承办人',
    width: 150,
    key: 'dealName',
    dataIndex: 'dealName',
    align: 'center',
    scopedSlots: { customRender: 'dealNameSlot' }
  },
  {
    title: '申请时间',
    dataIndex: 'subtime',
    key: 'subtime',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'subtimeSlot' }
  }
]

export default {
  data () {
    return {
      superviseDealNum: null,
      activtKey: '1',
      loading: false,
      personParam: {
        needAssignCode: undefined,
        assignCode: undefined,
        firstPerson: undefined,
        secondPerson: undefined,
        thirdPerson: undefined
      },
      firstPerson: undefined,
      ADMREVIEW_DEPART: ADMREVIEW_DEPART, // 行政复议相关科室
      Tp_biztype: Tp_biztype,

      treeData: [],
      departList: ADMREVIEW_DEPART,
      type: 'user',

      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns,
      mockData: [],
      targetKeys: [],
      disabled: false,
      rootSubmenuKeys: [],
      openKeys: [],

      queryParam: {
        f_code: '', // 案号
        f_applyname: '', // 申请人
        f_targetname: '', // 被申请人
        accepttime_start: null, // 开始时间
        accepttime_end: null, // 结束时间
        finishDate_start: undefined, // 办结完成开始日期
        finishDate_end: undefined, // 办结结束开始日期
        f_source: undefined, // 来源
        matid: '100000_360100-000201005000-QT-002-02', // matid
        pageNumber: 1,
        pageSize: 20,
        order: 'desc',
        isAssigned: null, // 是否分派
        category: 'evidence', // 环节标识
        userid: '' // 用户id
      },
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        // showTotal: total => `共计 ${total} 条数据`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100']
      }
    }
  },
  components: {
    deptUserTree: () => import('@/views/base/DeptUserTree.vue'),
    CommonHeadQueryComponent,
    CommonHeaderComponent
  },
  created () {
    this.findTreeData()
    this.queryUndoList()
  },
  mounted () {
    this.findTreeData()
    this.queryUndoList()
  },
  methods: {
    // 设置对应的枚举值
    setCompreEnumData (listData) {
      if (listData && listData.length > 0) {
        for (var index = 0; index < listData.length; index++) {
          const item = listData[index]
          if (item) {
            // 承办人
            let dealNames = []
            dealNames.push(item.firstname || item.firstname_bs)
            dealNames.push(item.secondname || item.secondname_bs)
            dealNames = dealNames.filter(el => el != null && el != '')
            item.dealName = dealNames.join('，')
            item.step_text = item.step ? Array.from(new Set(item.step.split(','))).join() : ''
          }
        }
      }
    },
    tabelChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryUndoList()
    },
    queryUndoList () {
      // queryParam.userid = this.currentUser.userId
      CommonAssignQuery(this.queryParam)
        .then(res => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.mockData = res.data.records
            this.setCompreEnumData(this.mockData)
            this.mockData.forEach(el => {
              el.key = el.id
              el.title = el.acceptcode
              el.description = el.acceptcode
              el.disabled = false
            })
            console.log('获取数据', this.mockData)
            for (let index = 0; index < this.mockData.length; index++) {
              if (this.mockData[index].firstid && this.mockData[index].secondid) {
                this.targetKeys.push(this.mockData[index].key)
              }
            }
            console.log('已选择', this.targetKeys)
          }
        })
        .catch(err => {
          this.mockData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.firstLoading = false
        })

    },

  // 查询树下拉的数据
  findTreeData () {
      queryUserTreeByDepartids(this.departList).then((res) => {
        if (res.code === 0 && res.data) {
          let data = res.data
          if (this.filterOrgIds && this.filterOrgIds.length > 0) {
            data = data.filter(item => this.filterOrgIds.includes(item.id))
            this.expandedKeys = this.expandedKeys.concat(this.filterOrgIds)
          }
          console.log('转换前的数据', data)
          data = this.fixSlot(data)
          this.treeData = this.renderTreeNodes(data)
          console.log('转换后的数据', this.treeData)
        }
      })
    },
    fixSlot (data) {
      // 构造slot
      return data.map((item) => {
        if (item.type === 'user') {
          item.scopedSlots = { avatar: item.avatar }
          if (item.children) {
            item.children = this.fixSlot(item.children)
          }
        } else {
          this.fixSlot(item.children)
        }
        return item
      })
    },
    // 给树数据中的部门添加禁选属性
    renderTreeNodes (data) {
      const setData = data.map((item) => {
        // 根据名称进行排序
        if (item.children && item.children.length > 0) {
          item.children = item.children.sort(function (a, b) {
            return a.name.localeCompare(b.name)
          })
        }
        if (item.type !== this.type) {
          item.disabled = true
          item.children && this.renderTreeNodes(item.children)
        }
        return item
      })
      return setData
    },

    onOpenChange (openKeys) {
       console.log(openKeys, this.$route.path)
        const latestOpenKey = openKeys.find((key) => this.openKeys.indexOf(key) === -1)
        console.log(latestOpenKey, this.rootSubmenuKeys.indexOf(latestOpenKey) === -1)
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.openKeys = openKeys
        } else {
            this.openKeys = latestOpenKey ? [latestOpenKey] : []
        }
    },

    onChange (nextTargetKeys, direction, moveKeys) {
      console.log(nextTargetKeys, direction, moveKeys)
      this.targetKeys = nextTargetKeys

      const tableDir = this.tableDir
        if (this.tableDir != this.tableDirs) {
          this.rigdata = []
          this.totalRolesList.forEach((item1) => {
            item1.modelList.forEach((item2) => {
                if (tableDir == item2.entityCnName) {
                  this.umn = item2.fieldCount
                }
            })
        })
        }
        if (direction == 'right') {
          this.rigdata.push(moveKeys.length)
            this.umn = eval(this.rigdata.join('+'))
            this.tableDirs = tableDir
        } else {
          console.log(9999999)
          console.log(this.umn)
          this.umn = this.umn - moveKeys.length
          //     this.tableDirs = tableDir
        }
          console.log(this.umn)
      // console.log(tableDir, length, this.totalRolesList)
      this.totalRolesList.forEach((item1) => {
        item1.modelList.forEach((item2) => {
            if (tableDir == item2.entityCnName) {
              item2.fieldCount = this.umn
            }
        })
      })
    },

    triggerDisable (disabled) {
      this.disabled = disabled
    },

    // 搜索框
    handleSearch (dir, value) {
        console.log('search:', dir, value)
    },
    getRowSelection ({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll (selected, selectedRows) {
          if (selected == true) {
            const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key)
            itemSelectAll(treeSelectedKeys, selected)
        } else if (selected == false) {
            const treeSelectedKeys = this.selectedRowKeys
            itemSelectAll(treeSelectedKeys, selected)
        }
        },
        onSelect ({ key }, selected) {
          itemSelect(key, selected)
        },
        selectedRowKeys: selectedKeys
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-tabs-tab:hover {
  color: inherit !important;
}
::v-deep .ant-tabs-nav-scroll {
  margin-left: 20px;
}
::v-deep .accept_main_tip_label_div {
  width: 300px !important;
}
::v-deep .ant-form-item-label {
  margin: 0px 8px;
}
::v-deep .ant-tabs-bar {
  margin-bottom: 0px;
}
::v-deep .ant-tabs-nav .ant-tabs-tab {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 16px;
  margin: 0 16px 10px 0;
  line-height: 0px;
}
::v-deep .ant-tabs-nav-scroll {
  background: white;
  padding-left: 10px;
  margin-left: 0px;
}
::v-deep .ant-tabs-ink-bar {
  margin: 0px 10%;
  width: 50px !important;
}

::v-deep .ant-tabs-nav-wrap {
  display: inherit;
}

.assign-titie-div {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.assign-tiltle-div-label {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0px;

  font-family: PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  line-height: 5px;
}
.assign-tiltle-div-operate {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 16px 0px;
  flex-direction: column;
}

.assign-operate-div {
  width: 100%
}

.assign-operate-left {
  display: flex;
  align-items: center;
  width: 40%
}
.assign-operate-mid {
  display: flex;
  align-items: center;
  width: 20%
}
.assign-operate-right {
  display: flex;
  align-items: center;
  width: 40%
}

::v-deep .ant-transfer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
::v-deep .ant-transfer-list {
  width: 45% !important;
}
::v-deep .ant-transfer-operation {
  width: 10% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
